import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import './index.less';

const VehicleInfoPage = () => {
  const [authCode, setAuthCode] = useState('');
  const [applyCode, setApplyCode] = useState('');
  const [applyTime, setApplyTime] = useState('');
  const [serviceOutlet, setServiceOutlet] = useState('');
  const [vehicleInfo, setVehicleInfo] = useState('');
  const [vehicleIdNumber, setVehicleIdNumber] = useState('');
  const [contactPhone, setContactPhone] = useState('');
  const [ownerName, setOwnerName] = useState('');
  const [ownerIdNumber, setOwnerIdNumber] = useState('');
  const [brandModel, setBrandModel] = useState('');
  const [contactAddress, setContactAddress] = useState('');
  const [engineNumber, setEngineNumber] = useState('');
  const [idCardDate, setIdCardDate] = useState('');
  const [identityBack, setIdentityBack] = useState('');
  const [identityFront, setIdentityFront] = useState('');
  const [identityNumber, setIdentityNumber] = useState('');
  const [name, setName] = useState('');
  const [payStatus, setPayStatus] = useState(false);
  const [plateNumber, setPlateNumber] = useState('');
  const [realName, setRealName] = useState('');
  const [role, setRole] = useState('');
  const [vehicleIdentificationNumber, setVehicleIdentificationNumber] = useState('');
  const [vehicleRegistrationCertificateBack, setVehicleRegistrationCertificateBack] = useState('');
  const [vehicleRegistrationCertificateFront, setVehicleRegistrationCertificateFront] = useState('');
  const [vehicleType, setVehicleType] = useState('');

  const formData = Taro.getStorageSync('formData');
  const params = JSON.parse(formData || '{}');

  useEffect(() => {
    setAuthCode(params.authCode || '');
    setApplyCode(params.applyCode || '');
    setApplyTime(params.applyTime || '');
    setServiceOutlet(params.serviceOutlet || '');
    setVehicleInfo(params.vehicleInfo || '');
    setVehicleIdNumber(params.vehicleIdNumber || '');
    setContactPhone(params.contactPhone || '');
    setOwnerName(params.ownerName || '');
    setOwnerIdNumber(params.ownerIdNumber || '');
    setBrandModel(params.brandModel || '');
    setContactAddress(params.contactAddress || '');
    setEngineNumber(params.engineNumber || '');
    setIdCardDate(params.idCardDate || '');
    setIdentityBack(params.identityBack || '');
    setIdentityFront(params.identityFront || '');
    setIdentityNumber(params.identityNumber || '');
    setName(params.name || '');
    setPayStatus(params.payStatus || false);
    setPlateNumber(params.plateNumber || '');
    setRealName(params.realName || '');
    setRole(params.role || '');
    setVehicleIdentificationNumber(params.vehicleIdentificationNumber || '');
    setVehicleRegistrationCertificateBack(params.vehicleRegistrationCertificateBack || '');
    setVehicleRegistrationCertificateFront(params.vehicleRegistrationCertificateFront || '');
    setVehicleType(params.vehicleType || '');
  }, [formData]);

  return (
    <View className="vehicle-info-page">
      <View className="header">
        <Text>信息核对</Text>
      </View>
      <View className="content">
        {applyCode && (
          <div className="info-section">
            <div className="label">申请编码:</div>
            <div> {applyCode}</div>
          </div>
        )}
        {applyTime && (
          <div className="info-section">
            <div className="label">申请时间:</div>
            <div> {applyTime}</div>
          </div>
        )}
        {vehicleInfo && (
          <div className="info-section">
            <div className="label">车辆信息:</div>
            <div> {vehicleInfo}</div>
          </div>
        )}
        {vehicleIdNumber && (
          <div className="info-section">
            <div className="label">车辆识别号:</div>
            <div> {vehicleIdNumber}</div>
          </div>
        )}
        {contactPhone && (
          <div className="info-section">
            <div className="label">联系电话:</div>
            <div> {contactPhone}</div>
          </div>
        )}
        {ownerName && (
          <div className="info-section">
            <div className="label">车主姓名:</div>
            <div> {ownerName}</div>
          </div>
        )}
        {ownerIdNumber && (
          <div className="info-section">
            <div className="label">身份证号码:</div>
            <div> {ownerIdNumber}</div>
          </div>
        )}
        {brandModel && (
          <div className="info-section">
            <div className="label">品牌型号:</div>
            <div> {brandModel}</div>
          </div>
        )}
        {engineNumber && (
          <div className="info-section">
            <div className="label">发动机号:</div>
            <div> {engineNumber}</div>
          </div>
        )}
        {idCardDate && (
          <div className="info-section">
            <div className="label">身份证日期:</div>
            <div> {idCardDate}</div>
          </div>
        )}

        {identityNumber && (
          <div className="info-section">
            <div className="label">身份证号码:</div>
            <div> {identityNumber}</div>
          </div>
        )}
        {name && (
          <div className="info-section">
            <div className="label">姓名:</div>
            <div> {name}</div>
          </div>
        )}

        {plateNumber && (
          <div className="info-section">
            <div className="label">车牌号码:</div>
            <div> {plateNumber}</div>
          </div>
        )}

        {role && (
          <div className="info-section">
            <div className="label">角色:</div>
            <div> {role}</div>
          </div>
        )}
        {vehicleIdentificationNumber && (
          <div className="info-section">
            <div className="label">车辆识别号:</div>
            <div> {vehicleIdentificationNumber}</div>
          </div>
        )}

        {vehicleType && (
          <div className="info-section">
            <div className="label">车辆类型:</div>
            <div> {vehicleType}</div>
          </div>
        )}
      </View>
      <View className="footer">
        <Button className="go-home-button" size='mini' onClick={() => Taro.switchTab({ url: '/pages/home/index' })}>
          确定
        </Button>
      </View>
    </View>
  );
};

export default VehicleInfoPage;